<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>变换</title>
<style type="text/css">
canvas {
	border:1px solid #000;
}
</style>
<script type="text/javascript">
function Draw(){
	var canvas=document.getElementById("canvas");
	var context = canvas.getContext("2d");
	context.translate(200,120);
	// 缩放图像，在水平方向和垂直方向设置不同的缩放因子
	context.scale(0.6,0.4);
	// 绘制一个圆形脸谱
	ArcFace (context);
}
function ArcFace(context){
	// 绘制一个圆形边框
	context.beginPath();
	context.arc(0,0,90,0,Math.PI*2,true);	
	context.lineWidth=5;
	context.strokeStyle="#f90";
	context.stroke();
	// 绘制一个脸型
	context.beginPath();	
	context.moveTo(-30,-30);
	context.lineTo(-30,-20);
	context.moveTo(30,-30);
	context.lineTo(30,-20);
	context.moveTo(-20,30);
	context.bezierCurveTo(-20, 44, 20, 30, 30, 20);		
	context.strokeStyle="#000";
	context.lineWidth=10;
	context.lineCap="round";
	context.stroke();
}

window.addEventListener("load",Draw,true);
</script>
</head>
<body style="overflow:hidden">
<canvas id="canvas" width="400" height="300">你的浏览器不支持该功能！</canvas>
</body>
</html>
